/*
 *
 * @ProjectName:    my_umi_app
 * @Package:
 * @ClassName:      setting
 * @Description:    博客相关设置
 * @Author:         SuPeiSen
 * @CreateDate:     2021/2/9 5:14 下午
 * @UpdateDate:     2021/2/9 5:14 下午
 * @UpdateRemark:   更新说明：
 * @Version:        1.0
 */
import React, { useEffect, useRef, useState } from 'react';
import { Button, Form, Input, Row, Spin, message } from 'antd';
import {
  GetBlogSettingApi,
  UpdateBlogSettingApi,
} from '@/service/blog_setting_api';
import { QiNiuUploadWidget } from '@/widget/qiniu_upload_widget/qiniu_upload_widget';
import { AppConfig, AppImageUrl } from '@/config/app_config';
import { IRouteComponentProps } from 'umi';

export default () => {
  const [blogHeaderImage, setBlogHeaderImage] = useState<string>('');

  const [loading, setLoading] = useState<boolean>(true);
  const [btnLoading, setBtnLoading] = useState<boolean>(false);
  const icpNumRef = useRef<Input>(null);
  const blogNameRef = useRef<Input>(null);
  const idRef = useRef<Input>(null);

  // 使用useForm创建form对象
  const [form] = Form.useForm();

  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };

  // 获取设置
  useEffect(() => {
    GetBlogSettingApi()
      .then((model) => {
        if (model.success) {
          const data = model.data!.data;
          form.setFieldsValue({
            id: data.id,
            icp_num: data.icp_num,
            blog_name: data.blog_name,
          });
          setBlogHeaderImage(data.blog_header_image);
        }
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <Spin />;
  }

  // 提交修改
  const submitInput = async (value: any) => {
    value.blog_header_image = blogHeaderImage;
    const success = await UpdateBlogSettingApi(value, () => {
      setBtnLoading(false);
    });
    if (success) {
      message.success('更新成功');
    } else {
      message.error('更新失败');
    }
  };

  return (
    <div className="main_div">
      <Row justify="start">
        <Form {...layout} onFinish={submitInput} form={form}>
          {/*ID：隐藏*/}
          <Form.Item name="id" hidden={true}>
            <Input hidden={true} ref={idRef} />
          </Form.Item>

          <Form.Item
            label="博主名称"
            name="blog_name"
            rules={[
              {
                required: true,
                message: '名称必须',
              },
            ]}
          >
            <Input className="inputLen" ref={blogNameRef} />
          </Form.Item>

          <Form.Item
            label="博客头像"
            name="blog_header_image"
            style={{ width: '300px' }}
            valuePropName="fileList"
          >
            {/*Tag对应的图片*/}
            <QiNiuUploadWidget
              onSelect={(url) => {
                setBlogHeaderImage(url);
              }}
              // @ts-ignore
              initValue={
                blogHeaderImage === undefined
                  ? []
                  : [
                      {
                        uid: -1,
                        name: blogHeaderImage ?? '',
                        status: 'done',
                        type: '',
                        url: AppImageUrl(blogHeaderImage),
                        size: 0,
                      },
                    ]
              }
            />
          </Form.Item>

          {/*icp备案*/}
          <Form.Item
            label="备案号"
            name="icp_num"
            rules={[
              {
                required: true,
                message: '备案号必须',
              },
            ]}
          >
            <Input className="inputLen" ref={icpNumRef} />
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Button
              type="primary"
              htmlType="submit"
              size="large"
              loading={loading}
            >
              保存
            </Button>
          </Form.Item>
        </Form>
      </Row>
    </div>
  );
};
